<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb type_selectss">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>
      <section>
        <div>
          <ul class="type_select">
            <div>
              <li>
                <div class="demonstration">关键词</div>
                <el-input class="input_num2" v-model="searchValue" placeholder="请输入"></el-input>
              </li>
            </div>

            <li class="operation_btn">
              <button @click="search" class="operation_btn2">查询</button>
              <button @click="reset" class="operation_btn1">重置</button>
            </li>
          </ul>
        </div>
        <div class="decorate"></div>
        <div class="btn_addclass btn_post">
          <el-button icon="el-icon-circle-plus-outline" class="btn-green icon-fontSize" @click="addBtn">添加</el-button>
        </div>
        <div style="padding: 0 20px">
          <el-table
            :data="tableData"
            class="tableStyle"
            :header-cell-style="$headerCellStyle"
            :border="$isborder"
            stripe
            size="medium"
          >
            <!-- <el-table-column type="selection" width="55" align="left">
            </el-table-column> -->
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" :width="$widtha" align="center" fixed="left"> </el-table-column>
            <el-table-column prop="branch_name" label="分馆名称" :width="$widthb" align="left"> </el-table-column>
            <el-table-column label="封面图片" :width="$widtha" align="left">
              <template slot-scope="scope">
                <a target="_blank" :href="$img(scope.row.img)" v-show="scope.row.img">
                  <div class="dataImg">
                    <img :src="$img(scope.row.img)" :onerror="$errImg" />
                  </div>
                </a>
              </template>
            </el-table-column>

            <el-table-column prop="dispark_time" label="开放时间" min-width="120" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="contacts" label="联系人" :width="$widthb" align="left"> </el-table-column>
            <el-table-column prop="tel" label="电话" :width="$widthb" align="left"> </el-table-column>
            <el-table-column prop="tel" label="地区" :width="$widthb" align="left">
              <template slot-scope="{ row }"> {{ row.province }}-{{ row.city }}-{{ row.district }} </template>
            </el-table-column>
            <el-table-column prop="address" label="详细地址" :width="$widthb" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="transport_line" label="交通路线" :width="$widthb" align="left"> </el-table-column>
            <el-table-column
              prop="borrow_notice"
              label="借阅规则"
              :width="$widthb"
              align="left"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="简介" prop="intro" :width="$widthb" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" min-width="310" fixed="right" :header-align="$heaerOpt">
              <template slot-scope="scope">
                <div class="btnFrom-box">
                  <div @click="modifyBtn(scope.row.id)" class="details-box">修改</div>
                  <div @click="empty(scope.row.id)" class="details-box"><span></span>用户账号管理</div>
                  <div @click="numBtn(scope.row)" class="details-box"><span></span> 查看数字资源</div>
                  <div class="more-box">
                    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
                      <p class="more-img"></p>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          :command="{
                            type: 'del',
                            id: scope.row.id,
                            row: scope.row,
                          }"
                        >
                          <span class="delete-box">删除</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination
            background
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="listTotal"
            :page-size="10"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
          >
          </el-pagination>
          
        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>

    <el-dialog title="添加账号" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账号" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <DeletetkPage ref="isdel" @deletesuccess="getmanDel"></DeletetkPage>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogFormVisible: false,
      dialogTableVisible: false,
      searchValue: "",
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      form: {
        name: "",
        password: "",
      },
    }
  },

  mounted() {},
  created() {
    // this.getList()
  },
  activated() {
    this.getList()
    if (this.$route.params.action === "refresh") {
      this.page = 1
      this.listTotal = 0
      this.currentPage1 = 1
      this.tableData = [] //表格数据
      this.searchValue = ""
    }
    //  console.log( this.$route.params.action," this.$route.params.action")
    this.$refs?.elTable?.doLayout()
    this.$route.params.action === "refresh" && this.getList()
    this.setPageTabs()
  },
  methods: {
    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/branchInfo/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: 10,
            keywords: this.searchValue,
          },
        })
        if (res) {
          this.tableData = res.content.data
          this.listTotal = res.content.total
          this.currentPage1 = res.content.current_page
        }
      } catch (err) {
        let error = err.message.split("/")
        if (error[0] == 203) {
          this.tableData = []
          this.listTotal = 0
        }
        console.log(err)
        this.errorHandler(err)
      }
    },
    //分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getList()
    },
    // 查询
    search() {
      console.log(this.searchValue)
      this.getList()
    },
    // 重置
    reset() {
      this.searchValue = ""
      this.page = 1
      this.getList()
    },
    /**
     * del 删除
     */
    //下拉菜单的触发
    handleCommand(command) {
      if (command.type == "del") {
        this.deleBtn(command.id) //删除
      }
    },
    // 点击添加
    addBtn() {
      this.$router.push({
        path: "/SystemSettings/ourMuseum/addOur",
      })
    },
    // 点击删除
    deleBtn(id) {
      this.$refs.isdel.delshow(id)
    },
    async getmanDel(id) {
      try {
        let res = await this.request({
          url: "/admin/branchInfo/del",
          method: "post",
          loading: true,
          data: {
            id: id,
          },
        })
        if (res) {
          this.$message({
            message: "删除成功",
            type: "success",
          })
          setTimeout(() => {
            this.getList()
          }, 1500)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 点击修改
    modifyBtn(id) {
      let idNum = id
      this.$router.push({
        path: "/SystemSettings/ourMuseum/modifys",
        query: {
          ids: idNum,
        },
      })
    },
    // 点击用户管理
    empty(id) {
      this.$router.push({
        path: "/ourMuseum/branchLibrary",
        query: {
          ids: id,
        },
      })
    },
    // 查看数字资源
    numBtn(rowList) {
      this.$router.push({
        path: "/digitalResource/figureList",
        query: {
          ids: rowList.id,
          branchname: rowList.branch_name,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
<style lang="scss">
.selct {
  display: flex;
  flex-direction: row;
  align-items: center;
  .set {
    width: 160px;
  }
  span {
    margin-right: 5px;
  }
}
</style>
